<template>
   <el-row :gutter="15">
    <el-col :lg="8" :md="12">
      <el-card class="analysis-chart-card" shadow="never">
        <template v-slot:header>
          <div class="ele-cell">
            <div class="ele-cell-content title">形象克隆统计</div>
            <div
              :class="['ele-inline-block', { 'hidden-sm-and-down': styleResponsive }]"
              style="width: 260px; margin-left: 10px"
            >
              <el-date-picker
                unlink-panels
                type="daterange"
                class="ele-fluid"
                end-placeholder="结束日期"
                start-placeholder="开始日期"
                v-model="avatarDatetime"
                range-separator="至"
                size="small"
                value-format="yyyy-MM-dd"
                @change="search(1)"
              />
            </div>
          </div>
        </template>
        <el-row :gutter="15">
          <el-col :lg="12" :md="12">
            <div class="card_box">
              <div class="card_box_cir">
                <img class="card_icon" src="@/assets/icon/icon-yesterday.png" alt="">
              </div>
              <div class="card_box_txt">
                <span class="sp1">昨日次数统计</span>
                <span class="sp2"><span class="sp3">{{statisData.avatarCountUsedYesterday}}</span> / {{statisData.avatarCount}}</span>
              </div>
            </div>
          </el-col>
          <el-col :lg="12" :md="12">
            <div class="card_box">
              <div class="card_box_cir">
                <img class="card_icon" src="@/assets/icon/icon-today.png" alt="">
              </div>
              <div class="card_box_txt">
                <span class="sp1">今日次数统计</span>
                <span class="sp2"><span class="sp3">{{statisData.avatarCountUsedToday}}</span> / {{statisData.avatarCount}}</span>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <v-chart
              ref="avatarChart"
              style="height: 345px"
              :option="avatarChartOption"
            />
          </el-col>
        </el-row>
      </el-card>
    </el-col>
    <el-col :lg="8" :md="12">
      <el-card class="analysis-chart-card" shadow="never">
        <template v-slot:header>
          <div class="ele-cell">
            <div class="ele-cell-content title">声音克隆统计</div>
            <div
              :class="['ele-inline-block', { 'hidden-sm-and-down': styleResponsive }]"
              style="width: 260px; margin-left: 10px"
            >
              <el-date-picker
                unlink-panels
                type="daterange"
                class="ele-fluid"
                end-placeholder="结束日期"
                start-placeholder="开始日期"
                v-model="voiceDatetime"
                range-separator="至"
                size="small"
                value-format="yyyy-MM-dd"
                @change="search(2)"
              />
            </div>
          </div>
        </template>
        <el-row :gutter="15">
          <el-col :lg="12" :md="12">
            <div class="card_box">
              <div class="card_box_cir">
                <img class="card_icon" src="@/assets/icon/icon-yesterday.png" alt="">
              </div>
              <div class="card_box_txt">
                <span class="sp1">昨日次数统计</span>
                <span class="sp2"><span class="sp3">{{statisData.voiceCountUsedYesterday}}</span> / {{statisData.voiceCount}}</span>
              </div>
            </div>
          </el-col>
          <el-col :lg="12" :md="12">
            <div class="card_box">
              <div class="card_box_cir">
                <img class="card_icon" src="@/assets/icon/icon-today.png" alt="">
              </div>
              <div class="card_box_txt">
                <span class="sp1">今日次数统计</span>
                <span class="sp2"><span class="sp3">{{statisData.voiceCountUsedToday}}</span> / {{statisData.voiceCount}}</span>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <v-chart
              ref="voiceChart"
              style="height: 345px"
              :option="voiceChartOption"
            />
          </el-col>
        </el-row>
      </el-card>
    </el-col>
    <el-col :lg="8" :md="12">
      <el-card class="analysis-chart-card" shadow="never">
        <template v-slot:header>
          <div class="ele-cell">
            <div class="ele-cell-content title">视频剪辑</div>
            <div
              :class="['ele-inline-block', { 'hidden-sm-and-down': styleResponsive }]"
              style="width: 260px; margin-left: 10px"
            >
              <el-date-picker
                unlink-panels
                type="daterange"
                class="ele-fluid"
                end-placeholder="结束日期"
                start-placeholder="开始日期"
                v-model="videoDatetime"
                range-separator="至"
                size="small"
                value-format="yyyy-MM-dd"
                @change="search(3)"
              />
            </div>
          </div>
        </template>
        <el-row :gutter="15">
         
          <el-col :lg="12" :md="12">
            <div class="card_box" style="height: 220px;">
              <div class="card_box_cir">
                <img class="card_icon" src="@/assets/icon/icon-yesterday.png" alt="">
              </div>
              
              <div class="card_box_txt">
                <span class="sp1">昨日剪辑时长</span>
                <span class="sp2"><span class="sp3">{{statisData.videoCountUsedYesterday}}</span> </span>
              </div>
            </div>
            <div class="card_box">
              <div class="card_box_cir">
                <img class="card_icon" src="@/assets/icon/icon-today.png" alt="">
              </div>
              <div class="card_box_txt">
                <span class="sp1">今日剪辑时长</span>
                <span class="sp2"><span class="sp3">{{statisData.videoCountUsedToday}}</span></span>
              </div>
            </div>
          </el-col>
          <el-col :lg="12" :md="12">
            <v-chart
              ref="videoChart"
              style="height: 390px"
              :option="videoChartOption"
            />
          </el-col>
        </el-row>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
  import { use } from 'echarts/core';
  import { CanvasRenderer } from 'echarts/renderers';
  import { GaugeChart,BarChart,LineChart } from 'echarts/charts';
  import {
    GridComponent,
    TooltipComponent,
    LegendComponent
  } from 'echarts/components';
  import VChart from 'vue-echarts';
  import { getAccountAvatarData,getAccountVoiceData,getAccountVideoData,getAccountStatisData } from '@/api/dashboard/analysis';
  import { echartsMixin } from '@/utils/echarts-mixin';

  use([
    CanvasRenderer,
    LineChart,
    GaugeChart,
    BarChart,
    GridComponent,
    TooltipComponent,
    LegendComponent
  ]);

  export default {
    components: { VChart },
    mixins: [echartsMixin(['avatarChart','voiceChart','videoChart'])],
    data() {
      return {
       
        avatarDatetime: '',
        voiceDatetime: '',
        videoDatetime: '',
        // 形象统计配置
        avatarChartOption: {},
        // 声音统计配置
        voiceChartOption: {},
        // 视频统计配置
        videoChartOption: {},
        statisData:{}
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    created() {
      this.getStatisData();
      this.getAvatarData();
      this.getVoiceData();
      this.getVideoData();
    },
    methods: {
      /* 搜索 */
      search(type) {
        if(type == 1){
          this.getAvatarData();
        }else if(type == 2){
          this.getVoiceData();
        }else if(type == 3){
          this.getVideoData();
        }
      },
      getStatisData(){
        getAccountStatisData().then((data) => {
          if(data != null){
            this.statisData = data
          }
        }).catch((e) => {
          this.$message.error(e.message);
        });
      },
      getVideoData(){

        let datyType = 0;
        let datetime = this.videoDatetime;

        if(datetime != ''){
          datyType = 1;
        }

        const [d1, d2] = datetime ?? [];

        getAccountVideoData({
          type:datyType,
          start_time:d1 ? d1 + ' 00:00:00' : '',
          end_time: d2 ? d2 + ' 23:59:59' : ''
        })
          .then((data) => {
            this.videoChartOption = {
              tooltip: {
                formatter: '{a} <br/>{b} : {c}%'
              },
              series: [
                {
                  name: 'Pressure',
                  type: 'gauge',
                  progress: {
                    show: true
                  },
                  detail: {
                    valueAnimation: true,
                    formatter: '{value}'
                  },
                  data: [
                    {
                      value: data,
                      name: '剪辑时长'
                    }
                  ]
                }
              ]
            };
          })
        

        
      },
      getVoiceData() {

        let datyType = 0;
        let datetime = this.voiceDatetime;

        if(datetime != ''){
          datyType = 1;
        }

        const [d1, d2] = datetime ?? [];

        getAccountVoiceData({
          type:datyType,
          start_time:d1 ? d1 + ' 00:00:00' : '',
          end_time: d2 ? d2 + ' 23:59:59' : ''
        })
          .then((data) => {
            this.voiceChartOption = {
              tooltip: {
                trigger: 'axis',
                formatter:function(params){
                  return "已用次数："+ params[0].data;
                }
              },
              xAxis: {
                type: 'category',
                data: data.date,
                axisTick: {
                  show: false
                },
                splitLine: {
                    show: false
                }
              },
              yAxis: {
                type: 'value',
                axisTick: {
                  show: false
                },
                splitLine: {
                    show: false
                }
              },
              series: [
                {
                  data:data.consume,
                  type: 'bar',
                  showBackground: true,
                  backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                  },
                  itemStyle: {
                    borderRadius: [20, 20, 0, 0]
                  }
                }
              ]
            };
          })
          .catch((e) => {
            this.$message.error(e.message);
          });
      },
      getAvatarData() {

        let datyType = 0;
        let datetime = this.avatarDatetime;

        if(datetime != ''){
          datyType = 1;
        }

        const [d1, d2] = datetime ?? [];

        getAccountAvatarData({
          type:datyType,
          start_time:d1 ? d1 + ' 00:00:00' : '',
          end_time: d2 ? d2 + ' 23:59:59' : ''
        })
          .then((data) => {
            this.avatarChartOption = {
              tooltip: {
                trigger: 'axis',
                formatter:function(params){
                  return "已用次数："+ params[0].data;
                }
              },
              xAxis: {
                type: 'category',
                data: data.date,
                axisTick: {
                  show: false
                },
                splitLine: {
                    show: false
                }
              },
              yAxis: {
                type: 'value',
                axisTick: {
                  show: false
                },
                splitLine: {
                    show: false
                }
              },
              series: [
                {
                  data:data.consume,
                  type: 'bar',
                  showBackground: true,
                  backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                  },
                  itemStyle: {
                    borderRadius: [20, 20, 0, 0]
                  }
                }
              ]
            };
          })
          .catch((e) => {
            this.$message.error(e.message);
          });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .title {
    padding-left: 10px;
    border-left: 3px solid #0256ff;
    font-size: 15px;
    color: #303133;
  }
  .card_box_cir1 .iconfont {
      font-size: 26px;
      color: #fff;
  }
  .card_icon{
    width: 52px;
    height: 52px;
  }

  .card_box {
      width: 100%;
      height: 100%;
      display: flex;
      -webkit-box-align: center;
      align-items: center;
      box-sizing: border-box;
      border-radius: 4px;
  }
  .card_box .card_box_cir {
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }



   .card_box .card_box_cir {
    
    border-radius: 50%;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
  }

  
  .card_box .card_box_cir {
    width: 45px;
    height: 45px;
    overflow: hidden;
    margin-right: 20px;
  }

  .card_box .card_box_txt .sp1 {
    display: block;
    color: #252631;
    font-size: 14px;
    margin-bottom: 5px;
  }

  .card_box .card_box_txt .sp2 {
    display: block;
    color: #98a9bc;
    font-size: 16px;
  }

  .card_box .card_box_txt .sp3 {
    color:#1890FF;
    font-size: 20px;
  }
</style>
